﻿@using Microsoft.AspNetCore.Components.Web
@namespace DFrame.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />

    @*Using latest tailwind?*@
    <script src="https://cdn.tailwindcss.com/3.0.18"></script>
    <script>
        tailwind.config = {
          theme: {
            extend: {
              colors: {
                clifford: '#da373d',
              }
            }
          }
        }
    </script>
    <script src="https://cdn.tailwindcss.com/3.0.18?plugins=forms@0.4.0,typography@0.5.1,aspect-ratio@0.4.0,line-clamp@0.3.1"></script>

    @*DaisyUI*@
    <link href="https://cdn.jsdelivr.net/npm/daisyui@2.2.1/dist/full.css" rel="stylesheet" type="text/css" />

    <style>
        html, body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            height: 100%;
            margin: 0;
        }

        h1:focus {
            outline: none;
        }

        a, .btn-link {
            color: #0071c1;
        }

        .btn-primary {
            color: #fff;
            background-color: #1b6ec2;
            border-color: #1861ac;
        }

        .content {
        }

        .valid.modified:not([type=checkbox]) {
            outline: 1px solid #26b050;
        }

        .invalid {
            outline: 1px solid red;
        }

        .validation-message {
            color: red;
        }

        #blazor-error-ui {
            background: lightyellow;
            bottom: 0;
            box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
            display: none;
            left: 0;
            padding: 0.6rem 1.25rem 0.7rem 1.25rem;
            position: fixed;
            width: 100%;
            z-index: 1000;
        }

            #blazor-error-ui .dismiss {
                cursor: pointer;
                position: absolute;
                right: 0.75rem;
                top: 0.5rem;
            }

        .blazor-error-boundary {
            background: url() no-repeat 1rem/1.8rem, #b32121;
            padding: 1rem 1rem 1rem 3.7rem;
            color: white;
        }

            .blazor-error-boundary::after {
                content: "An error has occurred."
            }

        .input-group :first-child {
            border-top-left-radius: .25rem;
            border-top-right-radius: 0;
            border-bottom-left-radius: .25rem;
            border-bottom-right-radius: 0;
        }

        .input-group :last-child {
            border-top-left-radius: 0;
            border-top-right-radius: .25rem;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: .25rem;
        }

        .table :where(thead,tfoot) :where(th,td):first-child {
            border-top-left-radius: .25rem;
            border-bottom-left-radius: 0rem;
        }

        .table :where(thead,tfoot) :where(th,td):last-child {
            border-top-right-radius: .25rem;
            border-bottom-right-radius: 0rem;
        }

        .btn-secondary.btn[disabled] {
            --tw-border-opacity: 0;
            --tw-text-opacity: 0.5;
            pointer-events: none;
            background-color: hsl(var(--s) / var(--tw-bg-opacity));
            opacity: 0.8;
            color: hsl(var(--sc) / var(--tw-text-opacity));
        }

        .btn-ghost.btn-active[disabled] {
            --tw-border-opacity: 0;
            --tw-bg-opacity: 0.1;
            background-color: hsl(var(--bc) / var(--tw-bg-opacity));
        }
    </style>

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body data-theme="dark" class="bg-base-100 text-slate-200 flex flex-col min-h-screen">
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>